<!--左右选项卡-->
<!--
<template>
  <div class="content3">
    <div class="top">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">测试一</mt-tab-item>
        <mt-tab-item id="2">测试二</mt-tab-item>
        <mt-tab-item id="3">测试三</mt-tab-item>
        <mt-tab-item id="4">测试四</mt-tab-item>
        <mt-tab-item id="5">测试五</mt-tab-item>
        <mt-tab-item id="6">测试六</mt-tab-item>
        <mt-tab-item id="7">测试七</mt-tab-item>
        <mt-tab-item id="8">测试八</mt-tab-item>
        <mt-tab-item id="9">测试九</mt-tab-item>
        <mt-tab-item id="10">测试十</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="content1">
            <ul>
              <li v-for="n in 100">1111</li>
            </ul>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="content2"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="content3"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
          <div class="content4"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="5">
          <div class="content5"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="6">
          <div class="content6"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="7">
          <div class="content7"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="8">
          <div class="content8"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="9">
          <div class="content9"></div>
        </mt-tab-container-item>
        <mt-tab-container-item id="10">
          <div class="content10"></div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <div class="bottom"></div>
  </div>
</template>
<style lang="scss">
  .content3 {
    width: 100%;
    .mint-navbar {
      overflow-x: scroll;
      display: inline-block;
      float: left;
      width: 100px;
    }
    .mint-navbar .mint-tab-item {
      color: #333;
      font-size: 20px;
      border-bottom: 1px solid #ccc;
    }
    .mint-navbar .mint-tab-item.is-selected {
      margin-bottom: 0;
      border-bottom: 1px solid #ccc;
    }
    .mint-tab-item-label {
      font-size: 15px;
    }
    .content1 {
      width: 100%;
      height: 500px;
      background: red;
      overflow-y: scroll;
      overflow-x: hidden;
      ul {
        li {
          width: 100%;
          height: 30px;
          background: #f2f2f2;
          line-height: 30px;
          border-bottom: 1px solid #ccc;
        }
      }
    }
    .content2 {
      width: 100%;
      height: 500px;
      background: greenyellow;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content3 {
      width: 100%;
      height: 500px;
      background: paleturquoise;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content4 {
      width: 100%;
      height: 500px;
      background: navy;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content5 {
      width: 100%;
      height: 500px;
      background: azure;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content6 {
      width: 100%;
      height: 500px;
      background: palevioletred;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content7 {
      width: 100%;
      height: 500px;
      background: aqua;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content8 {
      width: 100%;
      height: 500px;
      background: greenyellow;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content9 {
      width: 100%;
      height: 500px;
      background: gray;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .content10 {
      width: 100%;
      height: 500px;
      background: violet;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
</style>
<script>
  export default {
    name: 'Content3',
    data() {
      return {
        selected: '1'
      }
    }
  }
</script>
-->
<!--上下选项卡-->
<template>
  <div class="content3">
    <div class="top">
      <mt-navbar v-model="selected">
        <mt-tab-item v-for="(ta,index) in all" :id="index">{{ta.type}}</mt-tab-item>
      </mt-navbar>
      <scroll ref="wrapper">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item :id="index" v-for="(item,index) in all">
            <div class="repairs-list">
              <ul>
                <li v-for="(list,index) in item.data">
                  <router-link to="home/RepairsDetail" class="wrapper">
                    <div v-if="list.img.length>0">
                      <div class="re_img" v-for="(item,index) in list.img" v-if="index==0">
                        <img v-lazy="item" alt="">
                      </div>
                    </div>
                    <div v-else>
                      <div class="re_img">
                        <img src="./image/zaixian@2x.png" alt="">
                      </div>
                    </div>
                    <div class="content">
                      <h3 class="title">{{list.title}}</h3>
                      <p class="des">{{list.content}}</p>
                      <p v-if="list.status===1">
                        <span class="type">状态：已处理</span>
                      </p>
                      <p v-else>
                        <span class="type2">状态：未处理</span>
                      </p>
                    </div>
                    <div class="go-icon"></div>
                  </router-link>
                </li>
              </ul>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </scroll>
    </div>
    <div class="bottom"></div>
  </div>
</template>
<style lang="scss">
  .content3 {
    width: 100%;
    position: fixed;
    background: #f2f2f2;
    top: 0;
    left: 0;
    .top {
      margin-top: 45px;
      .mint-navbar {
        width: 90px;
        float: left;
        display: inline-block;
        background: #f2f2f2;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollTop: 500px;
        -webkit-overflow-scrolling: touch;
        .mint-tab-item {
          color: #333;
          font-size: 20px;
          width: 100%;
          height: 2.6px;
          border-bottom: 1px solid #cccccc;
          .mint-tab-item-label {
            font-size: 13px;
          }
        }
        .mint-tab-item:last-child {
          border-bottom: none;
        }
      }

      .mint-tab-item.is-selected {
        color: #0b7ad9;
        margin-bottom: 0;
        background: #fff;
      }
      .repairs-list {
        width: 100%;
        margin-left: 2px;
        background: #fff;
        ul {
          margin-bottom: 70px;
          li {
            background: #fff;
            border-bottom: 1px solid rgb(217, 217, 217);
            /*&:last-child {*/
            /*border-bottom: 1px solid transparent;*/
            /*}*/
            .wrapper {
              position: relative;
              display: flex;
              padding: 15px 0;
              .re_img {
                width: 44px;
                height: 55px;
                margin-left: 5px;
                margin-right: 5px;
                display: block;
                flex: 0 0 44px;
                img {
                  width: 100%;
                  height: 100%;
                  background: #f2f2f2;
                }
              }
              .content {
                width: 80%;
                .title {
                  font-size: 15px;
                  color: rgb(41, 41, 41);
                  font-weight: 400;
                }
                .des {
                  font-size: 13px;
                  color: rgb(128, 128, 128);
                  width: 95%;
                  line-height: 16px;
                  margin-top: 5px;
                }
                .type {
                  color: green;
                  margin-top: 5px;
                  display: inline-block;
                  font-size: 12px;
                }
                .type2 {
                  color: red;
                  margin-top: 5px;
                  display: inline-block;
                  font-size: 12px;
                }
              }
              .go-icon {
                position: absolute;
                top: 30px;
                right: 20px;
                width: 15px;
                height: 27px;
                background-size: 8px 16px;
                background-repeat: no-repeat;
                background: url("./image/back@2x.png");
              }
            }
          }
        }
      }
    }
  }
</style>
<script>
  import Scroll from '../common/scroll'

  export default {
    name: 'Content3',
    data() {
      return {
        selected: 0,
        all: []
      }
    },
    created() {
      this.getContent()
    },
    methods: {
      getContent() {
        const url = 'https://ynwx.zgwyzxw.cn/index.php/home/repair/index/?areas_id=204'
        this.$http.get(url).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.all = res.data.data
            console.log(this.all)
          }
        })
      }
    },
    components: {
      Scroll
    }
  }
</script>
